<script lang="ts" setup>
import { ref, watch, reactive, computed } from "vue";
import UserDeptForm from "./user-dept-form.vue";
const emits = defineEmits<{
  (e: "update:visible", val: boolean): void;
  (e: "save-success", data: any, res: any): void; //保存成功回调
}>();
const props = defineProps({
  //是否显示
  visible: {
    type: Boolean,
    default: false
  },
  /**部位id */
  userDeptId: String,
  /**用户id 新增的时候使用 */
  userId: String
});

const UserDeptFormRef = ref();

//设置是否显示双向绑定
const visibleModelValue = ref(props.visible);
watch(
  () => props.visible,
  val => {
    visibleModelValue.value = val;
  }
);
watch(visibleModelValue, val => {
  emits("update:visible", val);
});

const CmStructFormDialogState = reactive({
  dialogTitle: computed(() => (props.userDeptId ? "编辑用户部门信息" : "新增用户部门信息")),
  handleClose: () => {
    visibleModelValue.value = false;
  },
  //触发表单保存
  onOkButtonClick: () => {
    UserDeptFormRef.value.save();
  },
  //保存成功触发
  onSaveSuccess: (data: any, res: any) => {
    emits("save-success", data, res);
  }
});
</script>

<template>
  <div class="jxtech-dialog-form">
    <el-dialog
      v-model="visibleModelValue"
      :title="CmStructFormDialogState.dialogTitle"
      destroy-on-close
      :before-close="CmStructFormDialogState.handleClose"
    >
      <user-dept-form
        ref="UserDeptFormRef"
        :user-dept-id="userDeptId"
        :user-id="userId"
        @save-success="CmStructFormDialogState.onSaveSuccess"
      ></user-dept-form>
      <template #footer>
        <jxtech-cancel-button @click="CmStructFormDialogState.handleClose"></jxtech-cancel-button>
        <jxtech-ok-button @click="CmStructFormDialogState.onOkButtonClick"></jxtech-ok-button>
      </template>
    </el-dialog>
  </div>
</template>
